<template>
    <NavBar>
    </NavBar>
    <ContentField>
        <h2 style="text-align:center;margin-bottom: 10px;">我的班级</h2>
        <h2><router-link class="btn btn-sm btn-success" style="width: 15%;" :to="{name: 'addClass', params: {teacherId: teacherId}}">创建班级</router-link></h2>
        <table class="table  table-primary  table-striped table-hover" style="margin-bottom: 10px;">
            <thead class="table-dark text-center" >
                <tr>
                <th scope="col">id</th>
                <th scope="col">班级id(classId)</th>
                <th scope="col">教师id(tId)</th>
                <th scope="col">班级人数(cnt)</th>
                <th></th>
                </tr>
            </thead>
            <tbody class="text-center">
              <tr v-for=" (item, index) in classes" :key="item.id">
                    <th>{{ index + 1 }}</th>
                    <td>{{ item.classId }}</td>
                    <td>{{ teacherId }}</td>
                    <td>{{ item.cnt }}</td>
                    <td>
                        <router-link class="btn btn-sm btn-primary" style="margin-right:5px;" :to="{name:'classProfile', params: {classId:item.classId}}">查看班级</router-link>
                    </td>
              </tr>
            </tbody>
        </table>

        <PageNav :isFirstPage="isFirstPage" :isLastPage="isLastPage" :prePage="prePage" :nextPage="nextPage" :pageSize="pageSize" :pageNum="pageNum" :totalPage="totalPage" @getPage="getPage">
        </PageNav>
    </ContentField>
</template>

<script>

import NavBar from "@/components/teacher/NavBar.vue";
import ContentField from '@/components/commons/ContentField.vue';
import PageNav from '@/components/teacher/PageNav.vue';
import {useStore} from 'vuex';
import {ref} from 'vue';
import $ from 'jquery';


export default{
    name: 'classManage',
    components: {
        NavBar,
        ContentField,
        PageNav,
    },
    setup(){
        const store = useStore();
        let teacherId = store.state.user.id;  //当前在线教师的teacherId
        let classes = ref([]);  //班级列表

        let PageNum ;  //当前页数
        let PageSize ; //每页数据条数
        let pageNum = ref('');  //当前页数  变量  用于前端渲染
        let pageSize = ref('');  //每页数据条数  变量  用于前端渲染
        let totalNum = ref('');  //总条数
        let totalPage = ref(''); //总页数
        let isFirstPage = ref('');  //是否为第一页
        let isLastPage = ref('');  //是否为最后一页
        let nextPage = ref("");  //下一页
        let prePage = ref("");   //前一页


        pageSize.value = 1;
        pageNum.value = 5;
        totalPage.value = 3;
        isFirstPage.value = true;
        isLastPage.value = false;
        nextPage.value = 2;
        prePage.value = 1;

        const updatePageInfo = (pageNum,pageSize)=>{  //更新当前页数和每页大小
            PageNum = pageNum.value;
            PageSize = pageSize.value;
        }

        const getPage = (TId,PageNum,PageSize)=>{   //按页查询用户信息


            $.ajax({
            url: 'http://localhost:8090/sls/teacher/classesInfo/' +TId + '/' + PageNum +'/' + PageSize ,
            type: "get",
            headers: {
                Authorization: "Bearer " +store.state.user.token,
            },
            success(resp){
                
                //console.log(resp);
                classes.value = resp.list; //获取所有班级信息
                totalNum.value = resp.total;
                totalPage.value = resp.pages;
                pageNum.value = resp.pageNum;
                pageSize.value = resp.pageSize;
                isFirstPage.value = resp.isFirstPage;
                isLastPage.value = resp.isLastPage;
                nextPage.value = resp.nextPage;
                prePage.value = resp.prePage;

                updatePageInfo(pageNum, pageSize);
                
                // console.log('resp.list:');
                // console.log(resp.list); 
            },
            error(resp){
                console.log(resp);
            }
            });
        }

       // getPage(teacherId,PageNum, PageSize);

       

    return{
        updatePageInfo,
        getPage,
        classes,
        teacherId,
        PageNum,
        PageSize,
        pageNum,
        pageSize,
        totalNum,
        totalPage,
        isFirstPage,
        isLastPage,
        nextPage,
        prePage,
        }

    }


}

</script>

<style scoped>

</style>



<!-- const getTeacherInfo = (teacherId) => {
    //console.log("TId: ");
    //console.log(TId);

    $.ajax({
        url: 'http://localhost:8090/sls/teacher/getInfoByTId',
        type: 'get',
        data: {
            TId : teacherId,
        },
        headers: {
            Authorization: "Bearer " +store.state.user.token,
        },
        success(resp){
            console.log(resp);
            classes.value = resp.classes;
            id.value = resp.id;
            name.value = resp.name;

            // console.log("========");
            // console.log(id.value);
            // console.log(name.value);
            // console.log(teacherId.value);

        },
        error(resp){
            console.log(resp);
        }
    })
}

getTeacherInfo(teacherId); -->